<template>
	<view class="comment">
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<view class="wrap">
			<view v-if="data.length > 0">
				<view class="item" v-for="item in data" :key="item.id" @click="handleToDetail(item)">
					<title-tools :title="item.now_organization_classify" fontSize="30rpx"></title-tools>
					<view class="comment-content">
						{{item.message}}
					</view>
					<view class="comment-time">
						评论时间 {{item.createtime | formatDate}}
					</view>
					<view class="company-appeal">
						<view class="title">
							{{item.enterprise_name}}的诉求
						</view>
						<view class="content">
							{{item.appeal_content}}
						</view>
						<view class="finish-time">
							完成时间 {{item.solvetime | formatDate}}
						</view>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<view v-else class="no-data">
				<u-empty text="暂无记录" mode="data"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleTools from '../../../components/title-tools/TitleTools.vue'
	import { apiGetCommentList } from '@/api/home/home.js'
	export default {
		name: 'Comment',
		components: {
			TitleTools
		},
		data () {
			return {
				data: []
			}
		},
		onLoad() {
			this.apiGetCommentList();
		},
		methods: {
			//获取评论列表
			async apiGetCommentList() {
				const res = await apiGetCommentList();
				this.data = res.data;
				
				this.data.forEach(item => {
					item.now_organization_classify = '园区领导 ' + item.now_organization_name + '的评论：'
				})
			},
			//跳转评论详情
			handleToDetail (item) {
				console.log(item)
				let current = '';
				if (item.is_appeal == 1 && item.is_solve == 2) {				//公示状态
					current = 1
				} else if (item.is_appeal == 2 && item.is_solve == 2) {	//为公示状态
					current = 0;
				} else if (item.is_handle == 2 && item.is_timeout == 2) { //已交办
					current = 2
				} else if (item.is_solve == 3 && item.is_handle == 1) {	//待办
					this.$Router.push({
						name: 'backlog_declare_detail',
						params: {
							id: item.appeal_id,
							// current: current,
							// currentTab: 1
						}
					})
					return
				} else if (item.is_timeout == 1) { 	//超时状态
					current = 3;
				}
				this.$Router.push({
					name: 'finish_item',
					params: {
						id: item.appeal_id,
						current: current,
						currentTab: 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		padding: 10rpx 20rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.wrap {
		padding: 20rpx;
		width: 710rpx;
		min-height: 1170rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.comment-content {
			margin-top: 30rpx;
			font-size: 30rpx;
			color: #000000;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.comment-time {
			margin-top: 28rpx;
			font-size: 26rpx;
			color: #929292;
		}
		
		.company-appeal {
			padding: 20rpx;
			margin-top: 30rpx;
			background: #EAF1F9;
			border-radius: 10rpx;
			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #929292;
			}
			
			.content {
				margin-top: 29rpx;
				font-size: 28rpx;
				color: #929292;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.finish-time {
				margin-top: 29rpx;
				font-size: 26rpx;
				color: #929292;
			}
		}
		.line {
			margin: 30rpx 0;
			width: 670rpx;
			height: 1px;
			background: #E5E5E5;
		}
		.line:nth-last-child(1) {
			margin: 0;
			background-color: transparent;
		}
	}
	
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 30rpx;
		// width: 710rpx;
		height: calc(100vh - 106rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	
	.item {
		padding-bottom: 20rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #EEEEEE;
		&:nth-last-child(1) {
			border: none;
		}
	}
</style>
